<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-model:给表单元素使用，双向数据绑定，快速获取和设置表单元素内容
双向绑定：
    数据变化->视图自动更新
    视图变化->数据自动更新 例如表单文本框中输入123 ，绑定的数据也会跟着变
-->

<body>
    <div id="app">
        <div>
            <div>
                <label for="">姓名</label>
                <input type="text" v-model="name" />
            </div>

            <div>
                <label>密码</label>
                <input type="password" v-model="password" />
            </div>
            <button @click="show">提交</button>
            <button v-on:click="chong">重置</button>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: '',
                password: ''
            },
            methods: {
                show() {
                    console.log(111)
                    console.log(this.name + '->' + this.password)
                },
                chong() {
                    this.name = 'rr'
                    this.password = ''
                }
            }
        })
    </script>

</body>

</html>